<template>
  <div>
    <!-- 表单组件 -->
    {{inputVal}}
    <formDialog v-model="inputVal"></formDialog>
    <formDialog v-model="inputVal1"></formDialog>
    {{inputVal1}}
    <input1 v-model="inputVal1"></input1>

    <hr />
    <div>分割=====================================</div>
    <br />

    <myInput v-model="modelValue" @change="myInputChange">
      <!-- 插槽 -->
      <template slot="prepend">Http://</template>
      <el-button slot="append" icon="el-icon-search"></el-button>
    </myInput>

    <div style="margin-top:20px;">自定义模板下拉框</div>

    {{selectValue}}
    <mySelect v-model="selectValue" @rowClick="rowClick"></mySelect>

    <!-- <SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="inputVal" /> -->
    <!-- <div
      style="min-height: 500px; justify-content: center;position: relative;backgroun:blue"
      id="map"
    />-->
  </div>
</template>


<script>
import formDialog from "./formDialog.vue";
import input1 from "./input.vue";
import myInput from "@/package/myInput.vue";
import SimpleKeyboard from "./simpleKeyboard";
import mySelect from "./mySelect";
import {
  Scene,
  CityBuildingLayer,
  LineLayer,
  PolygonLayer,
  PointLayer
} from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
export default {
  components: { formDialog, input1, myInput, SimpleKeyboard ,mySelect},
  data() {
    return {
      inputVal: "",
      inputVal1: "",
      modelValue: "",

      selectValue: [],
      options: []
    };
  },
  mounted() {
    // this.getMap();
  },
  methods: {
    onChange(input) {
      this.inputVal = input;
    },
    onKeyPress(button) {
      console.log("button", button);
    },

    // 值改变
    myInputChange(val) {
      console.log(val);
    },
    getMap() {
      // 同样你也可以初始化一个 Mapbox 地图
      const scene = new Scene({
        id: "map",
        map: new GaodeMap({
          pitch: 35.210526315789465,
          style: "dark",
          center: [121.125531, 31.295444],
          zoom: 15,
          token: "fd333c3266f97f047a6a5497f6442739"
        })
      });
      scene.on("loaded", () => {
        fetch(
          "https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json"
        )
          .then(res => res.json())
          .then(data => {
            const pointLayer = new PointLayer({})
              .source(data)
              .size(2)
              .color("h8", [
                "#0A3663",
                "#1558AC",
                "#3771D9",
                "#4D89E5",
                "#64A5D3",
                "#72BED6",
                "#83CED6",
                "#A6E1E0",
                "#B8EFE2",
                "#D7F9F0"
              ]);

            scene.addLayer(pointLayer);
          });
      });
    },
    // 下拉框选择后返回的值
    rowClick(id){
      this.selectValue = [id]
    }
  }
};
</script>

<style scoped>

</style>